<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线用户功能API文档</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid mt-4">
        <div class="row">
            <div class="col-12">
                <h1>在线用户功能API文档</h1>
                <hr>
            </div>
        </div>
        
        <div class="row">
            <div class="col-12">
                <h2>功能说明</h2>
                <p>在线用户功能用于实时查看当前系统中在线的用户列表，包括用户的基本信息和登录时间。</p>
                
                <h2>API接口</h2>
                
                <div class="card mb-3">
                    <div class="card-header">
                        <strong>获取在线用户列表</strong>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">接口地址</h5>
                        <p class="card-text"><code>GET /sys/online/list</code></p>
                        
                        <h5 class="card-title">请求参数</h5>
                        <p class="card-text">无</p>
                        
                        <h5 class="card-title">返回结果</h5>
                        <pre><code>{
    "code": 0,
    "msg": "success",
    "data": [
        {
            "userId": 1,
            "username": "admin",
            "realName": "管理员",
            "email": "admin@example.com",
            "mobile": "13800138000",
            "status": 1,
            "createTime": "2023-01-01T12:00:00"
        }
    ]
}</code></pre>
                    </div>
                </div>
                
                <div class="card mb-3">
                    <div class="card-header">
                        <strong>获取在线用户数量</strong>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">接口地址</h5>
                        <p class="card-text"><code>GET /sys/online/count</code></p>
                        
                        <h5 class="card-title">请求参数</h5>
                        <p class="card-text">无</p>
                        
                        <h5 class="card-title">返回结果</h5>
                        <pre><code>{
    "code": 0,
    "msg": "success",
    "data": 5
}</code></pre>
                    </div>
                </div>
                
                <h2>前端页面</h2>
                <p>在线用户列表页面位于: <code>/pages/sys/online-users.html</code></p>
                <p>该页面会自动每30秒刷新一次在线用户列表。</p>
                
                <h2>权限配置</h2>
                <p>访问在线用户功能需要以下权限:</p>
                <ul>
                    <li>菜单权限: <code>sys:online:list</code></li>
                </ul>
                
                <h2>实现原理</h2>
                <ol>
                    <li>用户登录时，系统会将其添加到在线用户列表中</li>
                    <li>用户登出或token过期时，系统会将其从在线用户列表中移除</li>
                    <li>通过定时任务定期清理过期的在线用户</li>
                    <li>提供API接口供前端查询在线用户列表</li>
                </ol>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>